<template>
        <scroll class="listview"
         :data="data" 
         :listenScroll="listenScroll"
         :probeType="probeType"
         @scroll="scroll"
         ref="listview">
            <ul>
                <li v-for="(group,index) in data" class="list-group" :key="index" ref="listGroup">
                    <h2 class="list-group-title">{{group.title}}</h2>
                    <ul>
                        <li v-for="(item ,index) in group.items" :key="index" class="list-group-item">
                            <img v-lazy="item.avatar"  class="avatar" alt="">
                            <span class="name">{{item.name}}</span>
                        </li>
                    </ul>
                </li>
            </ul>
            <div class="list-shortcut" @touchstart="onShortcutTouchStart" @touchmove.stop.prevent="onShortcutTouchMove">
                <ul>
                    <li v-for="(item,index) in shortcutList" :key="index" class="item" :data-index="index" :class="{'current':currentIndex==index}">
                        {{item}}
                    </li>
                </ul>
            </div>
        </scroll>
</template>
<script>
import Scroll from '@/base/scroll/scroll'
import {getData} from '@/common/js/dom'

const  ANCHOR_HEIGHT=21;
export default {
    data(){
        return{
            scrollY:-1,
            currentIndex:0,
        }
    },
    props:{
        data:{
            type:Array,
            default:[]
        }
    },
    created(){
        this.touch={}
        this.listenScroll=true
        this.listHeight=[]
        this.probeType=3
    },
    methods:{
        onShortcutTouchStart(e){
           let anchorIndex=getData(e.target,'index');  
           let firstTouch=e.touches[0]
           this.touch.y1=firstTouch.pageY;
           this.touch.anchorIndex=anchorIndex;
           this._scrollTo(anchorIndex)
        },
        onShortcutTouchMove(e){
            let firstTouch=e.touches[0]
            this.touch.y2=firstTouch.pageY;
            let delta=(this.touch.y2-this.touch.y1)/ANCHOR_HEIGHT|0;
            let anchorIndex=(parseInt(this.touch.anchorIndex)+delta);
            this._scrollTo(anchorIndex)
        },
        scroll(pos){
            this.scrollY=pos.Y
        },
        _scrollTo(index){
            this.$refs.listview.scrollToElement(this.$refs.listGroup[index],0)
        },
        _calculateHeight(){
            this.listHeight=[]
            const list=this.$refs.listGroup;
            let height=0;
            this.listHeight.push(height)
            for(let i=0;i<list.length;i++){
                let item=list[i]
                height+=item.clientHeight;
                this.listHeight.push(height)
            }
        }
    },
    watch:{
        data(){
            setTimeout(()=>{
                this._calculateHeight();
            },20)
        },
        scrollY(newY){
            const listHeight=this.listHeight
            for(let i=0;i<listHeight.length;i++){
                let height1=listHeight[i]
                let height2=listHeight[i+1]
                if(!height2||(-newY>height1&&-newY<height2)){
                    this.currentIndex=i
                    console.log(this.currentIndex)
                    return
                }
            }
            this.currentIndex=0;
        }
    },
    computed:{
        shortcutList(){
            return this.data.map((group)=>{
                return group.title.substr(0,1)
            })
        }
    },
    components:{
        Scroll
    }
}
</script>
<style scoped lang='less'>
    .listview{
        position: absolute;
        width: 100%;
        height: 100%;
        overflow: hidden;
        background-color: #fff;
        .list-group{
            padding-bottom: 20px;
            .list-group-title{
                height: 30px;
                line-height: 30px;
                padding-left: 20px;
                color: dimgray;
                font-size: 18px;
                background-color: #dddddd;
                font-weight: 400;
            }
            .list-group-item{
                display: flex;
                align-items: center;
                padding: 20px 0 0 30px;
                .avatar{
                    width: 50px;
                    height: 50px;
                    border-radius: 50%;
                }
                .name{
                    margin-left: 20px;
                    color: #999999;
                    font-size: 16px;
                    font-weight: 400;
                }
            }
        }
        .list-shortcut{
            position: absolute;
            z-index: 30;
            right: 0;
            top: 50%;
            transform:translateY(-50%);
            width: 20px;
            padding: 20px 0;
            border-radius: 10px;
            text-align: center;
            // background-color: #cccccc;
            .item{
                padding: 3px;line-height: 1;box-sizing: border-box;
                color: #cccccc; font-size: 16px;
                &.current{
                    color:red;
                }
            }
        }
        .list-fixed{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            .fixed_title{
                height: 30px;
                line-height: 30px;
                padding-left: 30px;
                font-size: 16px;
                color: #999999;
                background-color: #cccccc;
            }
        }
        .loading-container{
            position: absolute;
            width: 100%;
            top: 50%;
            transform:translate(-50%)
        }
    }
</style>

